<template>
	<view class="content">
		<view class="welcome-content">
			您好，请注册
		</view>
		<view class="form-content">
			<u-cell style="margin-bottom: 18rpx;" icon="/static/img/login/user.png" size="large">
				<u-input v-model="form.nickname" slot="title" placeholder="用户名" border="surround"></u-input>
			</u-cell>
			<u-cell style="margin-bottom: 18rpx;" icon="/static/img/login/mobile.png" size="large">
				<u-input v-model="form.username" slot="title" placeholder="手机号" border="surround"></u-input>
			</u-cell>
			<u-cell style="margin-bottom: 18rpx;" icon="/static/img/login/idcard.png" size="large">
				<u-input v-model="form.idcardNo" slot="title" placeholder="身份证号" border="surround"></u-input>
			</u-cell>
			<u-cell style="margin-bottom: 18rpx;" icon="/static/img/login/subject.png" size="large" isLink>
				<uni-data-picker :localdata="items" slot="title" popup-title="请选择专业" placeholder="请选择专业"
					@change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
			</u-cell>
			<u-cell style="margin-bottom: 18rpx;" @click="showLevelPicker = true" icon="/static/img/login/level.png"
				size="large" isLink>
				<u-input v-model="form.level" disabled disabledColor="#ffffff" slot="title" placeholder="请选择学段"
					border="surround"></u-input>
			</u-cell>
			<u-cell icon="/static/img/login/lock.png" size="large">
				<u--input type="password" v-model="form.password" slot="title" placeholder="请输入密码" border="surround">
				</u--input>
			</u-cell>
			<u-cell icon="/static/img/login/lock.png" size="large">
				<u--input type="password" v-model="form.confirm_password" slot="title" placeholder="请再次输入密码"
					border="surround">
				</u--input>
			</u-cell>
			<view class="form-bottom">
				<view @click="toLogin">
					已有账号，返回登录
				</view>
			</view>
			<u-button @click="register" type="primary">注册</u-button>
		</view>
		<u-picker :show="showLevelPicker" @cancel="showLevelPicker = false" @confirm="handleLevelConfirm"
			:columns="levelColumns"></u-picker>
	</view>
</template>

<script>
	import {
		register,
	} from '@/api/index'
	export default {
		data() {
			return {
				tips: '',
				showLevelPicker: false,
				levelColumns: [
					["初级", "中级", "高级"]
				],
				form: {
					username: '',
					nickname: '',
					idcardNo: '',
					subject: '',
					level: '',
					password: '',
					confirm_password: ''
				},
				items: [{
						text: "一年级",
						value: "1-0",
						children: [{
								text: "1.1班",
								value: "1-1"
							},
							{
								text: "1.2班",
								value: "1-2"
							}
						]
					},
					{
						text: "二年级",
						value: "2-0"
					},
					{
						text: "三年级",
						value: "3-0"
					}
				]
			}
		},
		methods: {
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			//注册
			register() {
				if (!this.checkForm()) {
					return;
				}
				uni.showLoading({
					title: '注册中...'
				})
				register(this.form).then(res => {
					uni.$u.toast('注册成功')
					uni.navigateTo({
						url: '/pages/login/wait'
					})
					this.initData()
				}).catch((err) => {

				}).finally(() => {
					uni.hideLoading()
				})
			},
			checkForm() {
				let flag = true;
				if (!this.form.nickname) {
					uni.showToast({
						title: '请填写用户名',
						icon: 'none'
					})
					flag = false
				} else if (!this.form.username) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					flag = false
				} else if (!uni.$u.test.mobile(this.form.username)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					})
					flag = false
				} else if (!this.form.password) {
					uni.showToast({
						title: '请填写密码',
						icon: 'none'
					})
					flag = false
				} else if (!this.form.confirm_password) {
					uni.showToast({
						title: '请填写确定密码',
						icon: 'none'
					})
					flag = false
				} else if (this.form.password !== this.form.confirm_password) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
					flag = false
				}
				return flag;
			},
			//初始化data数据
			initData() {
				this.form = {
					username: '',
					nickname: '',
					area: '',
					password: '',
					confirm_password: ''
				}
			},
			handleLevelConfirm(e) {
				this.form.level = e.value[0]
				this.showLevelPicker = false
			},
			onchange(e) {
				const value = e.detail.value
			},
			onnodeclick(node) {}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/deep/.input-value-border {
			border: none;
		}

		/deep/.arrow-area {
			display: none;
		}

		/deep/.placeholder {
			color: rgb(192, 196, 204);
			font-size: 28rpx;
		}

		.welcome-content {
			font-size: 42rpx;
			padding: 260rpx 48rpx 0 48rpx;
			color: #333;
		}

		.logo {
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-top: 20rpx;
		}


		.form-content {
			padding: 84rpx 48rpx;


			/deep/.u-cell__body--large {
				padding: 0 !important;
			}

			/deep/.u-border {
				border: none !important;
			}

			.form-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				margin: 48rpx 0;
				color: #82848a;
			}
		}
	}
</style>
